<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="report.css">
</head>
<body>
</style>
</head>
<body>




<div id="article"></div>
<div id="back_top">
<div class="arrow"></div>
<div class="stick"></div>
</div>
<script src="http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js"></script>
<script>
$(function(){

$(window).scroll(function(){  

    var scrollt = document.documentElement.scrollTop + document.body.scrollTop; 

    if( scrollt >200 ){  

        $("#back_top").fadeIn(400); 

    }else{

        $("#back_top").stop().fadeOut(400); 

    }

});

$("#back_top").click(function(){ 
    $("html,body").animate({scrollTop:"0px"},200);

}); 

});
</script>
    <div class="report w"><h1>report</h1></div>
     <!-- 自我介绍部分 -->
     <div class="introduce w">
     <div class="name"><span>name:</span>江晓萃</div>
     <div class="name banji"><span>class:</span>软件2213</div>
     <div class="name start"><h3>start</h3></div>
    </div>
    <!-- 报告部分 -->
    <div class="explan">
        <!-- index部分 -->
    <div class="index w">
        <h2 class="part">index part</h2>
       <ul>
        <li>report文字部分利用css过渡属性实现简单动画效果，通过改变标签浮动时文字阴影和外边距来实现</li>
        <li>侧边栏采用了伸缩式且固定在左侧</li>
        <li>侧边栏图标在font-awesome图标库采取</li>
        <li>再给侧边栏的盒子的子盒子设置浮动</li>
        <li>侧边栏子盒子浮动时同样采用了css过渡属性，改变了浮动时文字阴影</li>
        
       </ul>
    </div>
         <!--page one部分  -->
    <div class="pageone w">
        <h2 class="part">page one</h2>
        <table align="center" border="2" cellspacing="0">
            
                <tr>
                    <th>位置</th>
                    <th>特点</th>
                </tr>
            <tr>
                <td>封面</td>
                <td>运用了css动画实现文字特效，鼠标靠近大文字，文字消失，鼠标离开，文字恢复，在文字下面设有俩个链接，一个是进入网页，一个是返回主页</td>
            </tr>
            
                <tr>
                    <td>百叶图部分</td>
                    <td>选定多张照片利用css过渡属性实现简单动画让图片展示更加平滑</td>
                </tr>
                <tr>
                    <td>sort影视类型部分</td>
                    <td>设置无序列表装下每一个标签，且每个li标签用a标签包裹链接外网，再采用float属性使他们一排显示，
                        给每一个标签添加左边框，然后设置浮动时文字阴影
                    </td>
                </tr>
                <tr>
                    <td>精品推荐部分</td>
                    <td>整体上采用了float属性，每一个盒子里面放置了多个小盒子，每个盒子被a标签包裹链接外网，图片盒子利用display属性
                        通过none和block来实现图片背后的展示，文字部分采用了单行文字溢出隐藏并省略号代替
                    </td>
                </tr>
                <tr>
                    <td>左侧导航栏部分</td>
                    <td>左侧固定，利用font-awesome图标，同样采用transition实现css简单动画效果，每个选项都被a标签包裹链接网站，链接的本地网站中运用了表单，返回处可以回到首页或主页</font-awesome></td>
                </tr>
            
        </table>
    </div>
         <!-- page two部分 -->
  <div class="pagetwo w">
            <h2 class="part">page two</h2>
            <ul>
                <li>红包外圈黄光闪烁部分是利用animation属性实现无限循环的跳动效果</li>
                <li>红包中间“开”字利用了active（点击时）和display属性实现隐藏和显现效果</li>
                <li>利用表格规定表格每个格子大小放入照片，同时设置nth-child让表格呈现不同颜色</li>
                <li>侧边栏部分固定在左侧，且利用锚点链接指定到内容</li>
            </ul>
 </div>
        <!-- page three部分 -->
   <div class="pagethree w">
    <h2 class="part">page three</h2>
    <ul>
        <li>利用float浮动实现盒子一排显示，同样利用display属性实现</li>
        <li>设置背景图片，文本居中对齐</li>
        <li>利用表格规定表格每个格子大小放入照片，用a标签包裹每一个格子，同时利用display浮动时显现文字，提示图片背后链接的网页</li>
    </ul>
   </div>
        <!-- report部分 -->
        <div class="pagereport w">
            <h2 class="part">report</h2>
            <ul>
                <li>利用css动画实现气泡浮动</li>
                <li>返回顶部按键</li>
                <li>采用表格形式</li>
            </ul>
        </div>
</div>
   
    <!-- 总结 -->
    <div class="all w">
        <h2 class="part">summary</h2>
           每一张页面都努力追求更美观一点，在盒子边框，字体，颜色，位置等效果上都进行修改，在每一个页面中浮动会改变颜色或出现提示的位置都是可以点击的，点击后可以返回主页或者是进入外网或者是产生其他文字效果。
           在有上下滑动条的页面中利用了js设置回到顶部处理。字数不够哈哈哈哈哈，那就说说我这一个学期以来的感受吧，刚接触这门课的时候觉得很难，完全听不懂
           ，但是老师真的好耐心，任何问题都会很耐心的解答，真的好好啊，然后随着一天天
         的熟悉，敲的代码更多了，就慢慢熟练了，也会觉得写代码是件很快乐的事儿哈哈哈哈哈，特别是当看到运行效果的时候。
        
</div>
<div class="solid"></div>
<footer>
        
        finish！！！
        <div class="return"><a href="index.html"> return to index page</a></div>
</footer>
 <!-- 气泡部分 -->
 <div class="bubbels">
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
</div>
</body>
</html>